<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
    <link rel="stylesheet" href="static/css/icons/font/bootstrap-icons.min.css">
    <style>
        /*顶栏*/
        .header{
            height:150px;
            background-color: #2c416f;
            padding: 10px 20px;
            display: flex;
            align-items: center;
            color: white;
            text-align: center;
        }
        .header-left{
            display:flex;
            align-items: center;
        }
        .header img{
            height:120px;
            margin-right: 10px;
        }
        .hp{
            font-size: 60px;
            color: white;
            text-decoration: none;
        }
        .ps{
            font-size: 20px;
            color: white;
            text-decoration: none;
        }
        .pm{
            height:20px;
            color: white;
            margin-right: 2px;
            font-size: 20px;
            text-decoration: none;
        }

        /*导航栏*/
        nav {
            background-color: #153173;
            overflow: hidden;
        }

        nav ul {
            display: flex;
            justify-content: space-around;
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        nav li {
            float: left;
        }
        nav li a {
            font-size: 20px;
            display: block;
            color: white;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
        nav li a:hover {
            color: red;
            /*border-bottom: 2px solid red;*/
            animation: jump 1s infinite alternate; /* 持续时间1秒，无限循环，交替方向 */
        }

        /*底栏*/
        .footer{
            display: flex;
            background-color: #274271;
            width: 100%;
            height: 313px;
            margin-top: 4%;
        }
        .left{
            display: flex;
            margin: 50px auto;
        }
        .right{
            display: flex;
            color: white;
            font-size: 25px;
            margin: 40px auto;
        }
        .right ul li{
            padding: 10px;
        }
        /* 定义跳动的动画 */
        @keyframes jump {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-5px); } /* 向下跳动5px */
        }
        .beside{
            display: flex;
            /*flex-direction: column;*/
            justify-content: space-around;
            margin-left: 0px;
        }
        .beside ul{
            list-style-type: none;
            width: 200px;
            height:100%
        }
        .beside li {
            display: flex;
            justify-content: center;
        }
        .beside li a{
            text-decoration: none;
            color: black;
        }
       .account-info{
           /*border: 3px solid blue;*/
           margin-top: 50px;
           margin-left: 130px;
           width: 1200px;
           height: 900px;
           background-color:white;
           border-radius: 50px;
       }
    </style>
</head>
<body style="background-color: #cccccc">
<div class = "header d-flex justify-content-between">
    <div class = "header-left d-flex align-content-center">
        <a href="/"><img src="static/img/logo.png" alt="logo"></a>
        <a href = "/" class = "hp">510-梦想工作室</a>
    </div>
    <div class = "header-right d-flex align-content-center">
        <a href = "/personal" class = "pm"><i class=" bi-person-circle"></i></a>
        <a href = "/personal" class = "ps">个人中心</a>
    </div>
</div>
<nav>
    <ul>
        <li><a href="#home">首页</a></li>
        <li><a href="#news">荣誉展示</a></li>
        <li><a href="#people">工作室人员</a></li>
        <li><a href="#model">大模型</a></li>
        <li><a href="#share">资源共享</a></li>
        <li><a href="#joinus">加入我们</a></li>
        <li><a href="#aboutus">关于我们</a></li>
        <li><a href="#feedback">意见反馈</a></li>
    </ul>
</nav>
<!--个人中心左栏-->
<div style="display:flex">
    <div class="beside" style="margin-right: 50px">
        <ul>
            <li><a href="#"><i class=" bi-person-circle" style="font-size: 100px;color: grey"></i></a></li>
            <li><a href="#" style="font-size: 30px;margin-top:50px"><span>昵称</span></a></li>
            <li><hr style="margin-top: 50px;width:400px"></li>
            <li><a href="#" style="font-size: 30px;margin-top: 50px"><span>个人博客</span></a></li>
            <li><a href="#" style="font-size: 30px;margin-top: 50px"><span>个人奖项</span></a></li>
            <li><a href="#" style="font-size: 30px;margin-top: 50px"><span>个人笔记</span></a></li>
            <li><hr style="margin-top: 50px;width:400px"></li>
            <li style="width: 180px"><a href="#" style="font-size: 30px;margin-top: 50px"><span>最近查看资料</span></a></li>
            <li style="width: 180px"><a href="#" style="font-size: 30px;margin-top: 50px"><span>最近使用模型</span></a></li>
        </ul>
    </div>
<!--个人中心右栏-->
    <div class="account-info">
        <h3 style="font-size: 50px;margin-left: 500px;margin-top: 50px">账号信息</h3>
        <p><span style="font-size: 25px;margin-top: 50px;display: inline-block;margin-left: 100px">账号：</span></p>
        <p><span style="font-size: 25px;margin-top: 50px;display: inline-block;margin-left: 100px">性别: </span></p>
        <p><span style="font-size: 25px;margin-top: 50px;display: inline-block;margin-left: 100px">学号: </span></p>
        <p><span style="font-size: 25px;margin-top: 50px;display: inline-block;margin-left: 100px">QQ号: </span></p>
        <p><span style="font-size: 25px;margin-top: 50px;display: inline-block;margin-left: 100px">电子邮箱: </span></p>
        <p><span style="font-size: 25px;margin-top: 50px;display: inline-block;margin-left: 100px">电话: </span></p>
        <p><span style="font-size: 25px;margin-top: 50px;display: inline-block;margin-left: 100px">个性签名: </span></p>
    </div>
</div>
<!--底栏-->
<div class="footer">
    <div class="left">
        <img src="../html/static/img/logo.png" style="width: 220px;height: 220px;">
        <div style="color: white;font-size: 70px; margin: 55px 80px">510-梦想工作室</div>
    </div>
    <div class="right">
        <ul>
            <li>联系方式：</li>
            <li>地址：中国矿业大学徐海学院主楼-608</li>
            <li>版权所有：©中国矿业大学徐海学院510梦想工作室</li>
            <li>XXXXXXXXX</li>
        </ul>
    </div>
</div>
</body>
</html>